<template>
	<view class="FindDetail">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<u-navbar>
			<view class="slotBox">
				<view class="userInfo" v-if="info.user">
					<view class="userImage">
						<image :data-id="info.user.id" @click="toMine" :src="getImage(info.user.image_url)" mode="" v-if="info.user"></image>
					</view>
					<view class="userName">{{info.user.username}}</view>
				</view>
			</view>
			
			<view slot="right" class="IconBox" @click="shareBtn">
				更多
			</view>
		</u-navbar>
		<view class="FindDetailBox">
			<view class="swiperBox"> 
				<!-- <u-swiper :list="swiperList"  @change="handchange" @click="previewImage" height="300px" :autoplay="true" mode="none" img-mode="widthFix"></u-swiper> -->
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="handchange" style="height: 1000upx;">
					<swiper-item v-for="(item,index) in swiperList" :key="index" :data-index="index" @click="previewImg">
						<view class="swiper-item" :style="{'background-image':'url('+getImage(item.image_url)+')'}" style="width: 100%;height: 1000upx;background-size: cover;background-position: center;">
							<!-- <image :src="item.image" :style="{'width':item.width+'px'}" mode="widthFix" v-if="item.type=='widthFix'"></image>
							<image :src="item.image" :style="{'height':item.height+'px'}" mode="heightFix" v-else></image> -->
						</view>
					</swiper-item>
				</swiper>
				<view class="currentPageBox">
					{{currentIndex}}/{{swiperList.length}}
				</view>
			</view>
			<view class="RichtextBox">
				<view class="RichtextBoxTit">{{info.title}}</view>
				<textarea class="RichtextBoxCon" v-model="info.content" disabled :auto-height="true" maxlength="-1"></textarea>
				<view class="labelTit" v-if="info.label">#{{info.label.name}}</view>
			</view>
			<view class="businessBox" v-if="info.shop_package" @click="toShop">
				<view class="businessImage">
					<image :src="getImage(info.shop_package.title_image)" mode="" v-if="info.shop_package"></image>
				</view>
				<view class="business_R">
					<view class="businessNameBox">
						<view class="businessName">{{info.shop_package.name}}</view>
						<!-- <view class="businessGive">
							<u-icon name="heart-fill" color="#FF5555" v-if="info.UserShareCollection"></u-icon>
							<u-icon name="heart-fill" color="#999" v-else></u-icon>
							<view class="businessGiveNum">{{info.collect_num}}</view>
						</view> -->
					</view>
					<view class="businesStype">{{info.shop.industry.name}}</view>
					<view class="addressBox">
						<view class="address">{{info.shop.detailed_address}}</view>
						<view class="addressNum">{{info.shop.juli}}km</view>
					</view>
				</view>
			</view>
			<view class="businessBox" v-if="!info.shop_package&&info.shop" @click="toShop">
				<view class="businessImage">
					<image :src="getImage(info.shop.image_url)" mode=""></image>
				</view>
				<view class="business_R">
					<view class="businessNameBox">
						<view class="businessName">{{info.shop.username}}</view>
						<!-- <view class="businessGive">
							<u-icon name="heart-fill" color="#FF5555" v-if="info.UserShareCollection"></u-icon>
							<u-icon name="heart-fill" color="#999" v-else></u-icon>
							<view class="businessGiveNum">{{info.collect_num}}</view>
						</view> -->
					</view>
					<view class="businesStype">{{info.shop.industry.name}}</view>
					<view class="addressBox">
						<view class="address">{{info.shop.detailed_address}}</view>
						<view class="addressNum">{{info.shop.juli}}km</view>
					</view>
				</view>
			</view>
			<view class="locationBox" v-if="!info.shop_package&&!info.shop&&info.third_party_title">
				<view class="timers" @click="toWebview">{{info.third_party_title}}</view>
				<view class="locationInfo" @click="toLocation">
					<u-icon name="map" color="#999"></u-icon>
					<view class="locationName">{{info.detailed_address}}</view>
				</view>
			</view>
			<view class="commentBox" v-if="commentList.length>0">
				<view class="commentItem" v-for="(item,index) in commentList" :key="index">
					<view class="commentImage" :style="{'background-image':'url('+getImage(item.user.image_url)+')'}" :data-id="item.user.id" @click="toMine">
						<!-- <image :src="getImage(item.user.image_url)" mode="" :data-id="item.user.id" @click="toMine"></image> -->
					</view>
					<view class="commentCont">
						<view class="commentUser">
							<view class="commentName">{{item.user.username}}</view>
							<view class="likesBox" @click="giveComment" :data-id="item.id" data-type="main" :data-index="index">
								<u-icon name="heart-fill" color="#FF5555" v-if="item.ShareCommentFabulous"></u-icon>
								<u-icon name="heart-fill" color="#707070" v-else></u-icon>
								<view class="likesNum">{{item.fabulous_num}}</view>
							</view>
						</view>
						<view class="commenttext" @longtap="showDel" :data-index="index" data-type="main" :data-userid="item.user.id">{{item.content}}</view>
						<view class="commenttime">
							<text>{{item.create_time|getTime}}</text>
							<text @click="replyComment" :data-index="index" data-type="main">回复</text>
						</view>
						
						<view class="replyBox">
							<view class="replyItem" v-for="(pitem,pindex) in item.sonComment" :key="index">
								<view class="replyImage" :data-id="pitem.user.id" @click="toMine" :style="{'background-image':'url('+getImage(pitem.userinfo.image_url)+')'}">
									<!-- <image :src="getImage(pitem.user.image_url)" mode="" :data-id="pitem.user.id" @click="toMine"></image> -->
								</view>
								<view class="reply_R">
									<view class="replyUser">
										<view class="replyName">{{pitem.userinfo.username}}</view>
										<view class="replyLike" @click="giveComment" :data-id="pitem.id" data-type="son" :data-index="index" :data-pindex="pindex">
											<u-icon name="heart-fill" color="#FF5555" v-if="pitem.ShareCommentReplyFabulous"></u-icon>
											<u-icon name="heart-fill" color="#707070" v-else></u-icon>
											<view class="replyLikeNum">{{pitem.fabulous_num}}</view>
										</view>
									</view>
									<view class="replyCont" @longtap="showDel" :data-index="index" :data-pindex="pindex" data-type="son" :data-userid="pitem.user.id">{{pitem.content}}</view>
									<view class="replyTime">
										<text>{{pitem.create_time|getTime}}</text>
										<text @click="replyComment" :data-index="index" :data-pindex="pindex" data-type="son">回复</text>
									</view>
								</view>
							</view>
              <view v-if="item.reply>0">
							<view class="more" v-if="item.moreFlag" :data-index="index" @click="getReplyList">展开更多回复</view>
              </view>
						</view>
					</view>
				</view>
			</view>
			<view class="emptyBox" v-else>
				<u-empty text="快来评论吧~" mode="message"></u-empty>
			</view>
			<view class="tabbarBox">
				<view class="inputBox">
					<input type="text" placeholder="说点什么吧" v-model="commentCont" confirm-type="send" @confirm="CommentBtn" focus v-if="replyFlag"/>
					<input type="text" placeholder="说点什么吧" v-model="commentCont" confirm-type="send" @confirm="CommentBtn" v-else/>
				</view>
				<view class="tabbarIcon">
					<view @click="CommentBtn">
						{{replyFlag?'回复':'发送'}}
					</view>
					<view class="IconItem" @click="toCollect">
						<u-icon name="heart-fill" size="48" color="#FF5555" v-if="info.UserShareCollection"></u-icon>
						<u-icon name="heart-fill" size="48" color="#707070" v-else></u-icon>
						<view class="IconName">收藏</view>
					</view>
					<!-- <view class="IconItem">
						<u-icon name="star" size="48" color="#707070"></u-icon>
						<view class="IconName">收藏</view>
					</view> -->
					<view class="IconItem" @click="toIconItem">
						<u-icon name="chat" size="48" color="#707070"></u-icon>
						<view class="IconName">评论</view>
					</view>
				</view>
			</view>
		</view>
		<view class="popupBox">
			<u-modal v-model="showName" title="举报" :show-cancel-button="true" @confirm="modifyName">
				<view style="padding:64upx;">
					<textarea placeholder="请输入" v-model="explain" />
				</view>
			</u-modal>
		</view>
		<view class="shareMark" v-if="shareFlag" @click="hideShare"></view>
		<view class="shareCon" v-if="shareFlag">
			<!-- <view class="shareItem" @click="toMaterial">
				<image src="../../static/index/WeChat.png"></image>
				<view>素材</view>
			</view> -->
			<!-- #ifdef APP -->
			<view class="shareItem" @click="shareWeiXin">
				<image src="../../static/index/WeChat.png"></image>
				<view>微信好友</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" class="shareBtns">
				<view class="shareItem">
					<image src="../../static/index/WeChat.png"></image>
					<view>微信好友</view>
				</view>
			</button>
			<!-- #endif -->
			<view class="shareItem" @click="savePhoto">
				<image src="../../static/index/savePhoto.png"></image>
				<view>保存相册</view>
			</view>
		</view>
		<image class="posterUrl" :src="posterUrl" mode="heightFix" v-if="shareFlag&&posterUrl"></image>
		<view class="poster">
			<image src="../../static/share/backT.png" class="backT"></image>
			<image src="../../static/share/back.png" class="backMain"></image>
			<image src="../../static/share/backB.png" class="backB"></image>
			<image src="../../static/share/backLTxt.png" class="backLTxt"></image>
			<image src="../../static/share/backRNr.png" class="backRDr"></image>
			<view class="conT">
				<view class="conUserMsg">{{shareStr}}<text style="color: #43CEED;font-size: 14px;line-height: 20px;" class="conUserMsgTxt" v-if="info.label">#{{info.label.name}}</text></view>
				<view class="conCardList" v-if="info.ShareImage&&info.ShareImage.length>0">
					<image :src="getImage(info.ShareImage[0].image_url)" mode="widthFix" class="conCardListImg"></image>
				</view>
			</view>
			<view class="conB">
				<!-- <view class="conBL">
					<image :src="getImage(info.image_url)" class="conBLImg"></image>
				</view> -->
				<view class="conBC">
					<view class="conBCName">与【{{userInfo.username}}】一起在若免</view>
					<view class="conBCIntro">分享好物，更多惊喜等你搜寻！</view>
				</view>
				<view class="conBR">
					<image :src="codeImg" class="conBRImg"></image>
				</view>
			</view>
		</view>
		<canvas v-if="canvasFlag"
			:style="{'width':posterData.poster.width +'px','height':posterData.poster.height +'px'}" class="can"
			canvas-id="mycan" style="position: fixed;top: -9999999px;"></canvas>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				showName:false,
				explain:"",
				swiperList: [],
				commentList:[],
				commentCont:"",
				currentIndex:1,
				id:"",
				info:{},
				swiperHeight:0,
				replyFlag:false,
				commentPage:1,
				replyPage:1,
				focusFlag:false,
				replyType:"",
				replyMainIndex:"",
				replySonIndex:"",
				systemInfo:{},
				userInfo:{},
				shareStr:"",
				codeImg:"",
				posterData:{},
				canvasFlag:false,
				posterUrl:"",
				shareFlag:false
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.typess = options.type;
			this.systemInfo = uni.getSystemInfoSync();
			this.userInfo = uni.getStorageSync("rmUser");
			this.getDetail();
			this.getQrcode();
		},
		onShareAppMessage(res) {
		  // if (res.from === 'button') {// 来自页面内分享按钮
		  //   // //console.log(res)
		  // }
		  if(this.info.ShareImage&&this.info.ShareImage.length>0){
			  return {
			    title: this.shareStr,
			    path: '/pages/pagetwo/pages/FindDetail/FindDetail?type=tpnr&id='+this.id,
			  	imageUrl:this.getImage(this.info.ShareImage[0].image_url)
			  }
		  }else{
			  return {
			    title: this.shareStr,
			    path: '/pages/pagetwo/pages/FindDetail/FindDetail?type=tpnr&id='+this.id,
			  }
		  }
		},
		methods: {
			hideShare(){
				this.shareFlag = false;
			},
			toIconItem(){
				
			},
			shareWeiXin(){
				if(this.info.ShareImage&&this.info.ShareImage.length>0){
					uni.share({
					  provider: "weixin",
					  scene: "WXSceneSession",
					  type: 0,
					  href: "https://www.ruo.shanxiyf.com/appShare.html?type=tpnr&nrid="+this.id,
					  title: this.info.title,
					  summary: this.shareStr,
					  imageUrl: "https://ruomian.oss-cn-chengdu.aliyuncs.com/logo108.png",
					  success: function (res) {
					    console.log("success:" + JSON.stringify(res));
					  },
					  fail: function (err) {
					    console.log("fail:" + JSON.stringify(err));
					  }
					});
				}else{
					uni.share({
					  provider: "weixin",
					  scene: "WXSceneSession",
					  type: 0,
					  href: "https://www.ruo.shanxiyf.com/appShare.html?type=tpnr&nrid="+this.id,
					  title: this.info.title,
					  summary: this.shareStr,
					  imageUrl: "https://ruomian.oss-cn-chengdu.aliyuncs.com/logo108.png",
					  success: function (res) {
					    console.log("success:" + JSON.stringify(res));
					  },
					  fail: function (err) {
					    console.log("fail:" + JSON.stringify(err));
					  }
					});
				}
			},
			toMaterial(){
				let arr = [];
				arr.push({url:this.posterUrl,flag:true});
				for(let i=0;i<this.nowGroupObj.images.length;i++){
					arr.push({url:this.getImage(this.nowGroupObj.images[i].image_url),flag:true});
				}
				let obj = {};
				obj.imgArr = arr;
				obj.shareTxt = this.shareStr;
				uni.setStorageSync("materialData",obj);
				uni.navigateTo({
					url:"/pages/pagethree/pages/material/material"
				})
			},
			getQrcode(){
				let obj = {};
				// #ifdef MP-WEIXIN
				obj.type = 1;
				// #endif
				// #ifdef APP
				obj.type = 2;
				// #endif
				obj.data = {};
				obj.data.type = "tpnr";
				obj.data.nrid = this.id;
				// obj.data.mdid = this.nowGroupObj.shopObj.shop_id;
				this.$u.api.qrcode(obj).then(res=>{
					//console.log(res);
					this.codeImg = res.data.data.replace(/[\n\r]/g,'');
				})
			},
			getElementInfo(name) {
				let _this = this;
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + name).boundingClientRect(data => {
						_this.posterData[name] = data;
						console.log(_this.posterData)
						resolve(data)
					}).exec();
				})
			
			},
			savePhoto(){
				uni.saveImageToPhotosAlbum({
					filePath: this.posterUrl,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
						});
					},
					fail:err=>{
						console.log(err)
					}
				});
			},
			getPoster() {
				uni.showLoading({
					title:"生成海报中..."
				})
				let promiseArr = [];
				if(this.info.ShareImage&&this.info.ShareImage.length>0){
					if(this.info.label){
						promiseArr = [
							this.getElementInfo("poster"),
							this.getElementInfo("backT"),
							this.getElementInfo("backMain"),
							this.getElementInfo("backB"),
							this.getElementInfo("backLTxt"),
							this.getElementInfo("backRDr"),
							this.getElementInfo("conT"),
							this.getElementInfo("conUserMsg"),
							this.getElementInfo("conUserMsgTxt"),
							this.getElementInfo("conCardListImg"),
							this.getElementInfo("conBCName"),
							this.getElementInfo("conBCIntro"),
							this.getElementInfo("conBR"),
							this.getElementInfo("conBRImg")
						]
					}else{
						promiseArr = [
							this.getElementInfo("poster"),
							this.getElementInfo("backT"),
							this.getElementInfo("backMain"),
							this.getElementInfo("backB"),
							this.getElementInfo("backLTxt"),
							this.getElementInfo("backRDr"),
							this.getElementInfo("conT"),
							this.getElementInfo("conUserMsg"),
							this.getElementInfo("conCardListImg"),
							this.getElementInfo("conBCName"),
							this.getElementInfo("conBCIntro"),
							this.getElementInfo("conBR"),
							this.getElementInfo("conBRImg")
						]
					}
				}else{
					if(this.info.label){
						promiseArr = [
							this.getElementInfo("poster"),
							this.getElementInfo("backT"),
							this.getElementInfo("backMain"),
							this.getElementInfo("backB"),
							this.getElementInfo("backLTxt"),
							this.getElementInfo("backRDr"),
							this.getElementInfo("conT"),
							this.getElementInfo("conUserMsg"),
							this.getElementInfo("conUserMsgTxt"),
							this.getElementInfo("conBCName"),
							this.getElementInfo("conBCIntro"),
							this.getElementInfo("conBR"),
							this.getElementInfo("conBRImg")
						]
					}else{
						promiseArr = [
							this.getElementInfo("poster"),
							this.getElementInfo("backT"),
							this.getElementInfo("backMain"),
							this.getElementInfo("backB"),
							this.getElementInfo("backLTxt"),
							this.getElementInfo("backRDr"),
							this.getElementInfo("conT"),
							this.getElementInfo("conUserMsg"),
							this.getElementInfo("conBCName"),
							this.getElementInfo("conBCIntro"),
							this.getElementInfo("conBR"),
							this.getElementInfo("conBRImg")
						]
					}
					
				}
				let ctx = uni.createCanvasContext('mycan');
				// this.getImageInfo("../../static/share/back.png","backMain").then(res=>{
				// 	//console.log(res)
				// })
				console.log(ctx)
				Promise.all(promiseArr).then(res=>{
					this.canvasFlag = true;
					this.$forceUpdate();
					ctx.drawImage("/static/share/back.png", this.posterData.backMain.left, this.posterData.backMain
						.top, this.posterData.backMain.width, this.posterData.backMain.height);
					ctx.drawImage("/static/share/backB.png", this.posterData.backB.left, this.posterData.backB.top,
						this.posterData.backB.width, this.posterData.backB.height);
					ctx.drawImage("/static/share/backT.png", this.posterData.backT.left, this.posterData.backT.top,
						this.posterData.backT.width, this.posterData.backT.height);
					ctx.drawImage("/static/share/backLTxt.png", this.posterData.backLTxt.left, this.posterData
						.backLTxt.top, this.posterData.backLTxt.width, this.posterData.backLTxt.height);
					ctx.drawImage("/static/share/backRNr.png", this.posterData.backRDr.left, this.posterData
						.backRDr.top, this.posterData.backRDr.width, this.posterData.backRDr.height);
					ctx.save();
					ctx.setFillStyle("#FFFFFF");
					ctx.setStrokeStyle('#FFFFFF')
					ctx.setLineJoin('round'); //交点设置成圆角
					ctx.setLineWidth(16);
					ctx.strokeRect(this.posterData.conT.left + 8, this.posterData.conT.top + 8, this.posterData
						.conT.width - 16, this.posterData.conT.height - 16);
					ctx.fillRect(this.posterData.conT.left + 16, this.posterData.conT.top + 16, this.posterData
						.conT.width - 32, this.posterData.conT.height - 32);
					ctx.stroke();
					ctx.closePath();
					ctx.save();
					ctx.restore();
					ctx.font = "bold 14px Microsoft YaHei";
					ctx.fillStyle = "#3F3F3F";
					ctx.textBaseline = "bottom";
					let intros = ""
					var chr = this.shareStr.split("");
					var temp = "";
					var row = [];
					console.log(chr)
					for (var a = 0; a < chr.length; a++) {
						if (temp.length*14 < this.posterData.conUserMsg.width) {;
						} else {
							row.push(temp);
							temp = "";
						}
						temp += chr[a];
					}
					row.push(temp);
					for (var b = 0; b < row.length; b++) {
						ctx.fillText(row[b], this.posterData.conUserMsg.left, this.posterData.conUserMsg.top + (b + 1) * 20);
					}
					ctx.restore();
					if(this.info.label){
						ctx.font = "bold 14px Microsoft YaHei";
						ctx.fillStyle = "#43CEED";
						ctx.textBaseline = "bottom";
						ctx.fillText("#"+this.info.label.name, this.posterData.conUserMsgTxt.left, this.posterData.conUserMsgTxt.top + 20);
						ctx.restore();
					}
					if(this.info.ShareImage&&this.info.ShareImage.length>0){
						app.$vm.getImgBase(this.getImage(this.info.ShareImage[0].image_url)).then(rekl=>{
								ctx.drawImage(rekl, this.posterData.conCardListImg.left, this.posterData.conCardListImg.top, this.posterData.conCardListImg.width, this.posterData.conCardListImg.height);
								ctx.font = "15px Microsoft YaHei";
								ctx.fillStyle = "#FFFFFF";
								ctx.textBaseline = "middle";
								ctx.fillText('与【'+this.userInfo.username+'】一起在若免', this.posterData['conBCName'].left, this.posterData['conBCName'].top + 11);
								ctx.save();
								ctx.restore();
								ctx.font = "12px Microsoft YaHei";
								ctx.fillStyle = "#FFFFFF";
								ctx.textBaseline = "middle";
								ctx.fillText('分享好物，更多惊喜等你搜寻！', this.posterData['conBCIntro'].left, this.posterData['conBCIntro'].top + 9);
								ctx.save();
								ctx.restore();
								ctx.setFillStyle("#FFFFFF");
								ctx.fillRect(this.posterData['conBR'].left,this.posterData['conBR'].top,this.posterData['conBR'].width,this.posterData['conBR'].height);
								// #ifdef MP-WEIXIN
								let fsm = wx.getFileSystemManager();  //文件管理器
								let FILE_BASE_NAME = new Date().getTime(); //文件名
								let format = 'png'; //文件后缀
								console.log(this.codeImg)
								let buffer = wx.base64ToArrayBuffer(this.codeImg.split(",")[1]); //base 转二进制
								let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
								console.log(filePath)
								let _this = this;
								fsm.writeFile({ //写文件
								      filePath,
								      data: buffer,
								      encoding: 'binary',
								      success:rem1=>{
								        wx.getImageInfo({ //读取图片
								          src: filePath,
								          success: rem2=> {
								            ctx.drawImage(rem2.path,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height) //画图
								            ctx.save();
								            ctx.draw(false, () => {
								            	let _this = this;
								            	setTimeout(function() {
								            		uni.canvasToTempFilePath({
								            			canvasId: 'mycan',
								            			fileType: 'jpg',
								            			x: 0,
								            			y: 0,
								            			quality:1,
								            			success: function(res) {
								            				console.log(res.tempFilePath)
								            				// 在这里保存图片
															_this.posterUrl = res.tempFilePath;
															
								            				uni.hideLoading()
															_this.$forceUpdate();
								            			},
								            			fail: function(error) {
								            				console.log(error)
								            			},							})
								            	}, 500)
								            })
								          },
								          error(res) {
								            console.log({
								              res
								            })
								          }
								        })
								      },
									  fail:err=>{
										  console.log(err)
									  }
								    })
								// #endif
								// #ifdef APP
								ctx.drawImage(this.codeImg,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height);
								ctx.save();
								ctx.draw(false, (() => {
									let _this = this;
									setTimeout(function() {
										// _this.posterUrl = ctx.toDataURL("image/png");
										// uni.hideLoading()
										// _this.$forceUpdate();
										uni.canvasToTempFilePath({
											canvasId: 'mycan',
											fileType: 'jpg',
											x: 0,
											y: 0,
											quality:1,
											success: function(res) {
												// console.log(res.tempFilePath)
												// 在这里保存图片
												_this.posterUrl = res.tempFilePath;
												// uni.$emit("posterShow",res.tempFilePath)
												uni.hideLoading()
												_this.$forceUpdate();
											},
											fail: function(error) {
												console.log(error)
											},							})
									}, 500)
								})())
								// #endif
							
						})
					}else{
						ctx.font = "15px Microsoft YaHei";
						ctx.fillStyle = "#FFFFFF";
						ctx.textBaseline = "middle";
						ctx.fillText('与【'+this.userInfo.username+'】一起在若免', this.posterData['conBCName'].left, this.posterData['conBCName'].top + 11);
						ctx.save();
						ctx.restore();
						ctx.font = "12px Microsoft YaHei";
						ctx.fillStyle = "#FFFFFF";
						ctx.textBaseline = "middle";
						ctx.fillText('分享好物，更多惊喜等你搜寻！', this.posterData['conBCIntro'].left, this.posterData['conBCIntro'].top + 9);
						ctx.save();
						ctx.restore();
						ctx.setFillStyle("#FFFFFF");
						ctx.fillRect(this.posterData['conBR'].left,this.posterData['conBR'].top,this.posterData['conBR'].width,this.posterData['conBR'].height);
						// #ifdef MP-WEIXIN
						let fsm = wx.getFileSystemManager();  //文件管理器
						let FILE_BASE_NAME = new Date().getTime(); //文件名
						let format = 'png'; //文件后缀
						console.log(this.codeImg)
						let buffer = wx.base64ToArrayBuffer(this.codeImg.split(",")[1]); //base 转二进制
						let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
						console.log(filePath)
						let _this = this;
						fsm.writeFile({ //写文件
						      filePath,
						      data: buffer,
						      encoding: 'binary',
						      success:rem1=>{
						        wx.getImageInfo({ //读取图片
						          src: filePath,
						          success: rem2=> {
						            ctx.drawImage(rem2.path,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height) //画图
						            ctx.save();
						            ctx.draw(false, () => {
						            	let _this = this;
						            	setTimeout(function() {
						            		uni.canvasToTempFilePath({
						            			canvasId: 'mycan',
						            			fileType: 'jpg',
						            			x: 0,
						            			y: 0,
						            			quality:1,
						            			success: function(res) {
						            				// console.log(res.tempFilePath)
						            				// 在这里保存图片
													_this.posterUrl = res.tempFilePath;
													
						            				uni.hideLoading()
													_this.$forceUpdate();
						            			},
						            			fail: function(error) {
						            				console.log(error)
						            			},							})
						            	}, 500)
						            })
						          },
						          error(res) {
						            console.log({
						              res
						            })
						          }
						        })
						      },
							  fail:err=>{
								  console.log(err)
							  }
						    })
						// #endif
						// #ifdef APP
						ctx.drawImage(this.codeImg,this.posterData['conBRImg'].left,this.posterData['conBRImg'].top,this.posterData['conBRImg'].width,this.posterData['conBRImg'].height);
						ctx.save();
						ctx.draw(false, (() => {
							let _this = this;
							setTimeout(function() {
								uni.canvasToTempFilePath({
									canvasId: 'mycan',
									fileType: 'jpg',
									x: 0,
									y: 0,
									quality:1,
									success: function(res) {
										console.log(res.tempFilePath)
										// 在这里保存图片
										_this.posterUrl = res.tempFilePath;
										uni.$emit("posterShow",res.tempFilePath)
										uni.hideLoading()
										_this.$forceUpdate();
									},
									fail: function(error) {
										console.log(error)
									},							})
							}, 500)
						})())
						// #endif
					}
				})
				
			},
			modifyName(){
				let obj = {};
				obj.share_id = this.id;
				obj.content = this.explain;
				this.$u.api.shareReportAdd({data:obj}).then(res=>{
					this.$refs.uToast.show({
						title:"举报成功",
						type:"success",
						duration:2000
					})
				})
			},
			toShop(){
				if(this.info.ShopPackage){
					app.$vm.globalData.shareid = this.info.user_id;
					app.$vm.globalData.tgid = this.info.ShopPackage.id;
					uni.navigateTo({
						url:"/pages/pagethree/pages/OfferDetails/OfferDetails?id="+this.info.ShopPackage.id
					})
				}else if(this.info.shop){
					app.$vm.globalData.shareid = this.info.user_id;
					app.$vm.globalData.mdid = this.info.shop.id;
					uni.navigateTo({
						url:"/pages/pagetwo/pages/FoodDetails/FoodDetails?id="+this.info.shop.id
					})
				}
			},
			toMine(e){
				console.log(e)
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pageone/pages/Business-card/Business-card?id="+id
				})
			},
			giveComment(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let dataObj = JSON.parse(JSON.stringify(this.commentList[index]));
				let obj = {};
				if(type=='main'){
					obj.user_id = this.info.user_id;
					obj.share_id = this.info.id;
					obj.share_comment_id = dataObj.id;
					console.log(obj)
					this.$u.api.shareCommentFabulousAdd(obj).then(res=>{
						//console.log(res)
            if(res.message ==  '点赞成功'){
						this.commentList[index].ShareCommentFabulous = 1;
						this.commentList[index].fabulous_num = this.commentList[index].fabulous_num + 1;
						this.$refs.uToast.show({
							title:"点赞成功",
							type:"success",
							duration:2000
						})
            }else{
              this.commentList[index].ShareCommentFabulous = 0;
              this.commentList[index].fabulous_num = this.commentList[index].fabulous_num - 1;
              this.$refs.uToast.show({
                title:"取消点赞成功",
                type:"success",
                duration:2000
              })
            }
					})
				}else if(type=='son'){
					let objs = {};
					let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
					
					objs.user_id = this.info.user_id;
					objs.share_comment_reply_id = 1;
					objs.share_comment_id = dataObj.id;
					console.log(objs)
					this.$u.api.shareCommentReplyFabulousAdd(objs).then(res=>{
						//console.log(res)
            if(res.message =='点赞成功'){
              this.commentList[index].sonComment[pindex].ShareCommentReplyFabulous = 1;
              this.commentList[index].sonComment[pindex].fabulous_num = this.commentList[index].sonComment[pindex].fabulous_num + 1;
              this.$refs.uToast.show({
                title:"点赞成功",
                type:"success",
                duration:2000
              })
            }else{
              this.commentList[index].sonComment[pindex].ShareCommentReplyFabulous = 0;
              this.commentList[index].sonComment[pindex].fabulous_num = this.commentList[index].sonComment[pindex].fabulous_num - 1;
              this.$refs.uToast.show({
                title:"取消点赞成功",
                type:"success",
                duration:2000
              })
            }

					})
				}
			},
			showDel(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let userid = e.target.dataset.userid || e.currentTarget.dataset.userid;
				if(userid==uni.getStorageSync("userId")){
					uni.showActionSheet({
						itemList:["删除"],
						success:res=>{
							//console.log(res)
							let obj = {};
							if(type=='main'){
								obj.id = this.commentList[index].id;
								this.$u.api.shareCommentDel(obj).then(res=>{
									this.$refs.uToast.show({
										title:"删除成功",
										type:"success",
										duration:2000
									})
									this.commentList.splice(index,1)
								})
							}else if(type=='son'){
								let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
								obj.id = this.commentList[index].sonComment[pindex].id;
								this.$u.api.shareCommentReplyDel(obj).then(res=>{
									this.$refs.uToast.show({
										title:"删除成功",
										type:"success",
										duration:2000
									})
									this.commentList[index].sonComment.splice(pindex,1)
								})
							}
						}
					})
				}
			},
			replyComment(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				if(type=='main'){
					this.replyMainIndex = index;
				}else if(type=='son'){
					let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
					this.replyMainIndex = index;
					this.replySonIndex = pindex;
				}
				this.replyType = type;
				this.replyFlag = true;
			},
			toCollect(){
				let obj = {};
				if(this.info.UserShareCollection){
					obj.share_id = this.info.UserShareCollection.share_id;
          obj.user_id = uni.getStorageSync("userId");
					this.$u.api.userShareCollectionDel(obj).then(res=>{
						this.$refs.uToast.show({
							title:"已取消收藏",
							type:"success",
							duration:2000
						})
						this.getDetail();
					})
				}else{
					obj.share_id = this.info.id;
					// obj.user_id = 1874;
					obj.user_id = uni.getStorageSync("userId");//this.user_id;
					this.$u.api.userShareCollectionAdd(obj).then(res=>{
						//console.log(res)
						this.$refs.uToast.show({
							title:"已收藏",
							type:"success",
							duration:2000
						})
						this.getDetail();
					})
				}
				
			},
			toLocation(){
				console.log(123,this.info)
				// #ifdef MP-WEIXIN
				app.$vm.checkAuth("scope.userLocation").then(result=>{
					if(result){
						uni.openLocation({
							latitude:Number(this.info.dimension),
							longitude:Number(this.info.longitude),
							address:this.info.detailed_address,
							success:res=>{
								
							}
						})
					}else{
						uni.showModal({
							title:"请检查系统定位和定位授权是否打开后重试"
						})
					}
				})
				// #endif
				// #ifdef APP
				uni.openLocation({
					latitude:Number(this.info.dimension),
					longitude:Number(this.info.longitude),
					address:this.info.detailed_address,
					success:res=>{
						
					}
				})
				// #endif
			},
			getImage(url) {
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			toWebview(){
				// #ifdef APP
				uni.navigateTo({
					url:"/pages/pagefive/pages/webView/webView?url="+encodeURIComponent(this.info.third_party_url)
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					title:"请打开浏览器粘贴后查看详情",
					content:"受系统限制，小程序不支持第三方平台链接跳转。",
					confirmText:"去粘贴",
					success:res=>{
						if(res.confirm){
							uni.setClipboardData({
								data:this.info.third_party_url
							})
						}
					}
				})
				// #endif
			},
			getDetail(){
				let obj = {};
				obj.id = this.id;
				obj.user_id = uni.getStorageSync("userId");
				// obj.dimension = app.$vm.globalData.latitude;
				// obj.longitude = app.$vm.globalData.longitude;
				obj.longitude = uni.getStorageSync("longitude");//117.082094;;
				obj.dimension = uni.getStorageSync("latitude");//39.987725;
				if(uni.getStorageSync("rmToken")){
					this.$u.api.shareDetails(obj).then(res=>{
						this.info = res.data;
						this.shareStr = res.data.title;
						this.getCommentList();
						if(this.info.shop){
							this.info.shop.juli = this.info.shop.juli.toFixed(2);
						}
						this.swiperList = this.info.share_image;
					})
				}else{
					this.$u.api.indexShareDetails(obj).then(res=>{
						// //console.log(res)
						this.info = res.data;
						this.shareStr = res.data.title;
						if(this.info.shop){
							this.info.shop.juli = this.info.shop.juli.toFixed(2);
						}
						// let arr = [];
						// for(let i=0;i<this.info.ShareImage.length;i++){
						// 	arr.push("");
						// }
						this.swiperList = this.info.share_image;
						// uni.getImageInfo({
						// 	src:this.getImage(this.info.ShareImage[0].image_url),
						// 	success:result=>{
						// 		console.log(this.getImage(this.info.ShareImage[0].image_url))
						// 		if(result.width>this.systemInfo.screenWidth){
						// 			this.swiperHeight = result.height/(result.width/this.systemInfo.screenWidth);
						// 		}else{
						// 			this.swiperHeight = this.systemInfo.screenWidth/result.width*result.height;
						// 		}
								
						// 		this.getImgFun(0);
						// 	},
						// 	fail(err) {
						// 		console.log(err)
						// 	}
						// })
					})
				}
			},
			getImgFun(index){
				this.getImageObj(index).then(res=>{
					if(index<this.info.ShareImage.length-1){
						this.getImgFun(index+1);
					}else{
						console.log(this.swiperList)
					}
				})
			},
			getImageObj(index){
				return new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src:this.getImage(this.info.ShareImage[index].image_url),
						success:result1=>{
							console.log(result1)
							let obj = {};
							obj.image = this.getImage(this.info.ShareImage[index].image_url);
							if(result1.width>result1.height){
								if(result1.width/this.systemInfo.screenWidth*result1.height>this.swiperHeight){
									obj.height = this.swiperHeight;
									obj.type = 'heightFix';
								}else{
									obj.width = this.systemInfo.screenWidth;
									obj.type = 'widthFix';
								}
							}else{
								if(result1.height/this.swiperHeight*result1.width>this.systemInfo.screenWidth){
									obj.width = this.systemInfo.screenWidth;
									obj.type = 'widthFix';
								}else{
									obj.height = this.swiperHeight;
									obj.type = 'heightFix';
								}
							}
							console.log(obj,this.swiperList)
							this.swiperList.splice(index,1,obj);
							console.log(this.swiperList)
							resolve();
						},
						fail:err=>{
							console.log(err)
						}
					})
				})
			},
			//分享
			shareBtn(){
				// uni.share({
				//   provider: "weixin",
				//   scene: "WXSceneSession",
				//   type: 0,
				//   href: "http://uniapp.dcloud.io/",
				//   title: "uni-app分享",
				//   summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				//   imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
				//   success: function (res) {
				//     console.log("success:" + JSON.stringify(res));
				//   },
				//   fail: function (err) {
				//     console.log("fail:" + JSON.stringify(err));
				//   }
				// });
				let arr = [];
				if(this.info.user_id==uni.getStorageSync("userId")){
					arr = ["编辑","分享","删除"];
				}else{
					arr = ["分享","举报"];
				}
				uni.showActionSheet({
					itemList:arr,
					success:res=>{
						//console.log(res)
						if(this.info.user_id==uni.getStorageSync("userId")){
							if(res.tapIndex==0){
								uni.navigateTo({
									url:"/pages/pagefour/pages/Release/Release?id="+this.id
								})
							}else if(res.tapIndex==1){
								this.shareFlag = true;
								this.getPoster();
							}else if(res.tapIndex==2){
								this.$u.api.shareDel({id:this.id}).then(res=>{
									//console.log(res)
									this.$refs.uToast.show({
										title:"删除成功",
										type:"success",
										duration:2000
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1500)
								})
							}
						}else{
							if(res.tapIndex==0){
								this.shareFlag = true;
								this.getPoster();
							}else if(res.tapIndex==1){
								this.showName = true;
							}
						}
					}
				})
			},
			previewImage(e){
				let keys = this.swiperList.map(item=>{
					return item.image
				})
				
			},
			previewImg(e){
				console.log(e)
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let keys = this.swiperList.map(item=>{
					return this.getImage(item.image_url);
				})
				uni.previewImage({
					current:index,
					urls:keys
				})
			},
			handchange(e){
				// console.log(e)
				this.currentIndex = (e.detail.current+1)
			},
			getCommentList(){
				let obj = {};
				obj.share_id = this.info.id;
				// obj.user_id=1874;
				obj.user_id = uni.getStorageSync("userId");
				obj.limit = 10;
				this.$u.api.shareCommentList(obj).then(res=>{
					if(this.commentPage == 1){
						this.commentList = res.list.data.map(cur=>{
							cur.sonComment = [];
							cur.moreFlag = true;
							cur.replyPage = 0;
							return cur;
						});
					}else{
						this.commentList = this.commentList.concat(res.list.data.map(cur=>{
							cur.sonComment = [];
							cur.moreFlag = true;
							cur.replyPage = 0;
							return cur;
						}));
					}
					
				})
			},
			getReplyList(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let dataObj = JSON.parse(JSON.stringify(this.commentList[index]));
				dataObj.replyPage = dataObj.replyPage + 1;
				let obj = {};
				obj.page = dataObj.replyPage;
				obj.user_id = this.info.user_id;
				obj.to_user_id = 3;
				obj.share_comment_id = dataObj.id;
				this.$u.api.shareCommentReplyList(obj).then(res=>{
					console.log(res)
					if(dataObj.replyPage==1){
						dataObj.sonComment = res.list.data;
					}else{
						dataObj.sonComment = dataObj.sonComment.concat(res.list.data);
					}
					if(dataObj.replyPage<res.list.last_page){
						dataObj.moreFlag = true;
					}else{
						dataObj.moreFlag = false;
					}
					this.commentList.splice(index,1,dataObj);
				})
			},
			CommentBtn(){
				console.log(this.commentCont)
				if(!this.commentCont.trim()){
					this.$refs.uToast.show({
						title:"评论内容不能为空",
						type:"error",
						duration:2000
					})
					return false;
				}
				if(this.replyFlag){
					let obj = {};
					obj.to_user_id = 3;
					obj.user_id = this.info.user_id;
					obj.fabulous_num = this.info.id;
					obj.share_comment_id = this.commentList[this.replyMainIndex].id;
					obj.content = this.commentCont;
					if(this.replyType=='main'){
						obj.share_comment_reply_id = 0;
					}else{
						obj.share_comment_reply_id = this.commentList[this.replyMainIndex].sonComment[this.replySonIndex].id;
					}
					this.$u.api.shareCommentReplyAdd(obj).then(res=>{
						this.$refs.uToast.show({
							title:"回复成功",
							type:"success",
							duration:2000
						})
            if (this.typess) {
              uni.navigateTo({
                url: "/pages/pagetwo/pages/FindDetail/FindDetail?id=" + this.info.id+'&type='+this.typess
              })
            } else {
              uni.navigateTo({
                url: "/pages/pagefive/pages/VideoDetail/VideoDetail?id=" + this.info.id+'&type='+this.typess
              })
            }
						// let objs = res.data.data;
						// objs.user = {};
						// objs.user.id = uni.getStorageSync("rmUser").user_id;
						// objs.user.username = uni.getStorageSync("rmUser").username;
						// objs.user.image_url = uni.getStorageSync("rmUser").image_url;
						// this.replyFlag = false;
						// this.commentCont = "";
						// this.commentList[this.replyMainIndex].sonComment.unshift(objs);
					})
				}else{
					let obj = {};
					obj.share_id = this.info.id;
					obj.content = this.commentCont;
					obj.fabulous_num = 1;
					// obj.user_id = 1874;
					obj.user_id = uni.getStorageSync("userId");
					this.$u.api.shareCommentAdd(obj).then(res=>{
						//console.log(res)
						this.$refs.uToast.show({
							title:"评论成功",
							type:"success",
							duration:2000
						})
						let objs = res.data;
						objs.user = {};
						objs.user.id = uni.getStorageSync("rmUser").user_id;
						objs.user.username = uni.getStorageSync("rmUser").username;
						objs.user.image_url = uni.getStorageSync("rmUser").image_url;
						this.replyFlag = false;
						this.commentCont = "";
						this.commentList.unshift(objs);
            if (this.typess) {
              uni.navigateTo({
                url: "/pages/pagetwo/pages/FindDetail/FindDetail?id=" + this.info.id+'&type='+this.typess
              })
            } else {
              uni.navigateTo({
                url: "/pages/pagefive/pages/VideoDetail/VideoDetail?id=" + this.info.id+'&type='+this.typess
              })
            }
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.shareBtns{
		background: white !important;
		margin: 0 !important;
		padding: 0 !important;
		outline: none !important;
		border: none !important;
	}
	.shareBtns::before{
		border: none !important;
	}
	.shareBtns::after{
		border: none !important;
	}
	.shareCon{
		width: 100%;
		height: 180upx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: white;
		z-index: 1000000;
		box-sizing: border-box;
		padding: 0 70upx;
		display: flex;
		justify-content: space-between;
	}
	.shareItem{
		// width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.shareItem>image{
		width: 90upx;
		height: 90upx;
	}
	.shareItem>view{
		font-size: 28upx;
		line-height: 28upx;
		color: #3F3F3F;
	}
	.shareMark{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		z-index: 999999;
	}
	
	.posterUrl{
		// width: 542upx;
		height: 60%;
		bottom: 212upx;
		left: 50%;
		transform: translateX(-50%);
		position: fixed;
		z-index: 1000000;
	}
	
	.conB {
		width: 100%;
		margin-top: 24upx;
		display: flex;
		box-sizing: border-box;
		padding: 0 10upx;
		align-items: center;
		height: 138upx;
	}
	
	.conBL {
		width: 124upx;
		height: 124upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: white;
		margin-right: 16upx;
	}
	
	.conBL>image {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
	}
	
	.conBC {
		width: calc(100% - 154upx);
		height: 138upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.conBC>view:nth-child(1) {
		font-size: 30upx;
		line-height: 42upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		margin-bottom: 8upx;
	}
	
	.conBC>view:nth-child(2) {
		font-size: 24upx;
		line-height: 34upx;
		color: white;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		// margin-bottom: 8upx;
	}
	
	.conBR {
		width: 138upx;
		height: 138upx;
		background: white;
		border-radius: 8upx;
		margin-left: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.conBR>image {
		width: 114upx;
		height: 114upx;
		border-radius: 8upx;
	}
	
	
	
	.conCardList {
		margin-top: 32upx;
	}
	.conCardList>image{
		width: 100%;
	}
	
	.conCardItem {
		width: 100%;
		height: 126upx;
		box-sizing: border-box;
		padding: 20upx 30upx 26upx 20upx;
		display: flex;
		align-items: center;
		background-image: url(../../static/share/shareItem.png);
		background-position: 0 0;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}
	
	.conCardItem:last-child {
		margin-bottom: 0;
	}
	
	.cardAvator {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 12upx;
	}
	
	.cardShareIcon {
		width: 54upx;
		height: 52upx;
		margin-left: 12upx;
	}
	
	.cardInfo {
		width: calc(100% - 158upx);
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.cardInfo>view:nth-child(1) {
		font-size: 28upx;
		color: #3F3F3F;
		font-weight: bold;
		line-height: 40upx;
		margin-bottom: 6upx;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.cardInfo>view:nth-child(2) {
		display: flex;
		align-items: center;
	}
	
	.cardInfo>view:nth-child(2)>view {
		font-size: 24upx;
		color: #3F3F3F;
		line-height: 34upx;
	}
	
	.cardInfo>view:nth-child(2)>view:nth-child(1) {
		margin-right: 20upx;
	}
	
	
	.conT {
		width: 100%;
		box-sizing: border-box;
		padding: 56upx 40upx 58upx;
		border-radius: 16upx;
		background: white;
	}
	
	.conAvator {
		width: 100%;
		height: 124upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.conAvatorL {
		width: 124upx;
		height: 124upx;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16upx;
		position: relative;
	}
	
	.avatorBack {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.avatorCon {
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
		position: relative;
		z-index: 9;
	}
	
	.conAvatorR {
		width: calc(100% - 140upx);
		height: 124upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.conAvatorRT {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.conAvatorRT>view {
		font-size: 32upx;
		line-height: 44upx;
		color: #3F3F3F;
		font-weight: bold;
	}
	
	.conAvatorRT>image {
		width: 18upx;
		height: 28upx;
		margin-left: 8upx;
	}
	
	.conAvatorRB {
		font-size: 28upx;
		color: #3F3F3F;
		line-height: 40upx;
		margin-top: 16upx;
	}
	
	.conUserMsg {
		// margin-top: 16upx;
		width: 100%;
		line-height: 20px;
		color: #3F3F3F;
		font-size: 14px;
		white-space: pre-wrap;
		font-weight: bold;
	}
	
	
	
	
	.backLTxt {
		width: 102upx;
		height: 50upx;
		position: absolute;
		top: 64upx;
		left: 34upx;
		z-index: 1;
	}
	
	.backRDr {
		width: 190upx;
		height: 52upx;
		position: absolute;
		right: 36upx;
		top: 64upx;
		z-index: 1;
	}
	
	.poster {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 122upx 32upx 24upx;
		z-index: -1;
		opacity: 0;
	}
	
	.backT {
		width: 100%;
		height: 202upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	.backMain {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -3;
	}
	
	.backB {
		width: 100%;
		height: 548upx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -2;
	}
	.labelTit{
		font-size: 24upx;
		margin-top: 20upx;
		color: #409EFF;
	}
	
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
.FindDetail{
	height: calc(100vh - 104upx);
	overflow: auto;
	padding-top: 88upx;
	.slotBox{
		// padding: 0 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.userInfo{
			display: flex;
			align-items: center;
			.userImage{
				width: 32upx;
				height: 32upx;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.userName{
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-left: 16upx;
			}
		}
	}
	.IconBox{
		padding-right: 24upx;
	}
	.FindDetailBox{
		.RichtextBox{
			padding: 32upx 24upx;
			.RichtextBoxTit{
				font-size: 32upx;
				color: #333333;
				font-weight: bold;
				line-height: 40upx;
				margin-bottom: 16upx;
			}
			.RichtextBoxCon{
				width: 100%;
				font-size: 28upx;
				color: #333333;
				// line-height: 40upx;
			}
		}
		.swiperBox{
			position: relative;
			width: 750upx;
			height: auto;
			.currentPageBox{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				bottom: 32upx;
				right: 24upx;
				min-width: 62upx;
				height: 38upx;
				background: rgba(0,0,0,0.5);
				border-radius: 22upx;
				font-size: 20upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 38upx;
				color: #FFFFFF;

			}
		}
		.businessBox{
			display: flex;
			width: 702upx;
			background: #FFFFFF;
			box-shadow: 0 0 12upx rgba(0, 0, 0, 0.1);
			opacity: 1;
			border-radius: 8upx;
			padding: 24upx 16upx;
			margin: 0 auto;
			.businessImage{
				width: 96upx;
				height: 96upx;
				border-radius: 8upx;
				margin-right: 16upx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
			}
			.business_R{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: calc(702upx - 144upx);
				.businessNameBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.businessName{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}
					.businessGive{
						display: flex;
						align-items: center;
						.businessGiveNum{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							margin-left: 8upx;
						}
					}
				}
				.businesStype{
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
				.addressBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.locationBox{
			padding: 24upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2upx solid #F5F5F5;
			.timers{
				font-size: 16upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
			.locationInfo{
				display: flex;
				align-items: center;
				.locationName{
					font-size: 16upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-left: 4upx;
				}
			}
		}
		.commentBox{
			padding: 48upx 24upx;
			.commentItem{
				display: flex;
				padding-bottom: 16upx;
				border-bottom: 2upx solid #F5F5F5;
				margin-bottom: 16upx;
				.commentImage{
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 16upx;
					background-position: center;
					background-size: cover;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.commentCont{
					width: calc(100% - 96upx);
					
					.commentUser{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.commentName{
							font-size: 28upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
						.likesBox{
							display: flex;
							align-items: center;
							.likesNum{
								font-size: 20upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								margin-left: 8upx;
							}
						}
					}
					.commenttime{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-top: 8upx;
						display: flex;
						align-items: center;
						>text:nth-child(1){
							font-size: 20upx;
							line-height: 20upx;
							color: #999999;
						}
						>text:nth-child(2){
							font-size: 20upx;
							line-height: 20upx;
							color: #333333;
							margin-left: 20upx;
						}
					}
					.commenttext{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-top: 16upx;
					}
					.replyBox{
						margin-top: 16upx;
						.more{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4C8CCE;
							// padding: 16upx 0;
						}
						.replyItem{
							display: flex;
							.replyImage{
								width: 40upx;
								height: 40upx;
								border-radius: 50%;
								overflow: hidden;
								margin-right: 16upx;
								background-size: cover;
								background-position: center;
								image{
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}
							.reply_R{
								width: calc(100% - 56upx);
								.replyUser{
									display: flex;
									justify-content: space-between;
									align-items: center;
									height: 40upx;
									.replyName{
										font-size: 28upx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #666666;
										line-height: 40upx;
									}
									.replyLike{
										display: flex;
										align-items: center;
										.replyLikeNum{
											font-size: 20upx;
											font-family: Source Han Sans CN;
											font-weight: 400;
											color: #666666;
											margin-left: 8upx;
										}
									}
								}
								.replyTime{
									font-size: 20upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #999999;
									margin-top: 16upx;
									display: flex;
									align-items: center;
									>text:nth-child(1){
										font-size: 20upx;
										line-height: 20upx;
										color: #999999;
									}
									>text:nth-child(2){
										font-size: 20upx;
										line-height: 20upx;
										color: #333333;
										margin-left: 20upx;
									}
								}
								.replyCont{
									font-size: 20upx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #333333;
									margin-top: 16upx;
								}
								
							}
						}
					}
				}
			}
		}
		.emptyBox{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750upx;
			height: 300upx;
		}
		.tabbarBox{
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			width: 750upx;
			height: 104upx;
			background: #FFFFFF;
			opacity: 1;
			padding: 24upx;
			z-index: 999;
			border-top: 2upx solid #E5E5E5;
			.inputBox{
				// width: 294upx;
				// height: 56upx;
				background: #F5F5F5;
				opacity: 1;
				border-radius: 28upx;
				// padding: 18upx 32upx;
				// box-sizing: border-box;
				input{
					width: 294upx;
					height: 56upx;
					// width: 100%;
					// height: 100%;
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					// line-height: 34upx;
					padding-left: 32upx;
					box-sizing: border-box;
					color: #333;
				}
			}
			.tabbarIcon{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: calc(750upx - 294upx);
				padding-left: 32upx;
				.IconItem{
					display: flex;
					align-items: center;
					.IconName{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-left: 8upx;
					}
				}
			}
		}
	}
}
</style>